<template>
  <div class="drawing-toolbar">
    <div class="toolbar-header">
      <h3>绘图工具</h3>
    </div>
    
    <!-- 工具选择 -->
    <div class="tool-section">
      <h4>工具</h4>
      <div class="tool-grid">
        <div 
          class="tool-item"
          :class="{ active: currentTool === 'brush' }"
          @click="setTool('brush')"
        >
          <div class="tool-icon">🖌️</div>
          <span>画笔</span>
        </div>
        
        <div 
          class="tool-item"
          :class="{ active: currentTool === 'eraser' }"
          @click="setTool('eraser')"
        >
          <div class="tool-icon">🧽</div>
          <span>橡皮擦</span>
        </div>
        
        <div 
          class="tool-item"
          :class="{ active: currentTool === 'fill' }"
          @click="setTool('fill')"
        >
          <div class="tool-icon">🪣</div>
          <span>填充</span>
        </div>
        
        <div 
          class="tool-item"
          :class="{ active: currentTool === 'eyedropper' }"
          @click="setTool('eyedropper')"
        >
          <div class="tool-icon">👁️</div>
          <span>吸管</span>
        </div>
      </div>
    </div>
    
    <!-- 画笔设置 -->
    <div class="tool-section">
      <h4>{{ getToolLabel() }}设置</h4>
      <div class="size-control">
        <label>大小:</label>
        <el-slider
          v-model="brushSize"
          :min="1"
          :max="100"
          :step="1"
          show-input
          size="small"
        />
      </div>
      
      <div class="opacity-control" v-if="currentTool === 'brush'">
        <label>透明度:</label>
        <el-slider
          v-model="opacity"
          :min="0.1"
          :max="1"
          :step="0.1"
          show-input
          size="small"
        />
      </div>
    </div>
    
    <!-- 颜色选择 -->
    <div class="tool-section" v-if="currentTool === 'brush'">
      <h4>颜色</h4>
      <div class="color-controls">
        <el-color-picker
          v-model="currentColor"
          size="large"
          show-alpha
          @change="onColorChange"
        />
        
        <div class="color-presets">
          <div 
            v-for="color in colorPresets"
            :key="color"
            class="color-preset"
            :style="{ backgroundColor: color }"
            @click="setColor(color)"
          ></div>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="tool-section">
      <h4>操作</h4>
      <div class="action-buttons">
        <el-button 
          @click="undo" 
          type="warning" 
          size="small" 
          :disabled="!canUndo"
          :icon="RefreshLeft"
        >
          撤销
        </el-button>
        
        <el-button 
          @click="redo" 
          type="info" 
          size="small" 
          :disabled="!canRedo"
          :icon="RefreshRight"
        >
          重做
        </el-button>
        
        <el-button 
          @click="clear" 
          type="danger" 
          size="small"
          :icon="Delete"
        >
          清空
        </el-button>
      </div>
    </div>
    
    <!-- 图层控制 -->
    <div class="tool-section">
      <h4>图层</h4>
      <div class="layer-controls">
        <el-button 
          @click="addLayer" 
          type="success" 
          size="small"
          :icon="Plus"
        >
          新建图层
        </el-button>
        
        <el-button 
          @click="toggleLayerVisibility" 
          type="default" 
          size="small"
          :icon="View"
        >
          显示/隐藏
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { 
  RefreshLeft, 
  RefreshRight, 
  Delete, 
  Plus, 
  View 
} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      tool: 'brush',
      size: 10,
      color: '#1890ff',
      opacity: 1
    })
  },
  canUndo: {
    type: Boolean,
    default: false
  },
  canRedo: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'tool-change', 'undo', 'redo', 'clear', 'add-layer', 'toggle-layer'])

// 工具状态
const currentTool = ref(props.modelValue.tool)
const brushSize = ref(props.modelValue.size)
const currentColor = ref(props.modelValue.color)
const opacity = ref(props.modelValue.opacity)

// 颜色预设
const colorPresets = [
  '#ff0000', '#ff8000', '#ffff00', '#80ff00',
  '#00ff00', '#00ff80', '#00ffff', '#0080ff',
  '#0000ff', '#8000ff', '#ff00ff', '#ff0080',
  '#000000', '#404040', '#808080', '#c0c0c0',
  '#ffffff'
]

// 计算属性
const currentColorWithOpacity = computed(() => {
  if (currentTool.value === 'brush') {
    return `${currentColor.value}${Math.round(opacity.value * 255).toString(16).padStart(2, '0')}`
  }
  return currentColor.value
})

// 方法
function setTool(tool) {
  currentTool.value = tool
  emitToolChange()
}

function setColor(color) {
  currentColor.value = color
  emitToolChange()
}

function onColorChange(color) {
  currentColor.value = color
  emitToolChange()
}

function getToolLabel() {
  const toolLabels = {
    brush: '画笔',
    eraser: '橡皮擦',
    fill: '填充',
    eyedropper: '吸管'
  }
  return toolLabels[currentTool.value] || '工具'
}

function emitToolChange() {
  const toolState = {
    tool: currentTool.value,
    size: brushSize.value,
    color: currentColorWithOpacity.value,
    opacity: opacity.value
  }
  
  emit('update:modelValue', toolState)
  emit('tool-change', toolState)
}

function undo() {
  emit('undo')
}

function redo() {
  emit('redo')
}

function clear() {
  emit('clear')
}

function addLayer() {
  emit('add-layer')
}

function toggleLayerVisibility() {
  emit('toggle-layer')
}

// 监听外部变化
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    currentTool.value = newValue.tool || 'brush'
    brushSize.value = newValue.size || 10
    currentColor.value = newValue.color || '#1890ff'
    opacity.value = newValue.opacity || 1
  }
}, { deep: true })

// 监听内部变化
watch([currentTool, brushSize, currentColor, opacity], () => {
  emitToolChange()
})
</script>

<style scoped>
.drawing-toolbar {
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  height: fit-content;
  max-height: 90vh;
  overflow-y: auto;
}

.toolbar-header {
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 15px;
}

.toolbar-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.tool-section {
  margin-bottom: 25px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.tool-section h4 {
  margin: 0 0 15px 0;
  color: #555;
  font-size: 14px;
  font-weight: 600;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.tool-item:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
}

.tool-item.active {
  background: #2196f3;
  color: white;
  border-color: #1976d2;
}

.tool-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.tool-item span {
  font-size: 12px;
  font-weight: 500;
}

.size-control,
.opacity-control {
  margin-bottom: 15px;
}

.size-control label,
.opacity-control label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.color-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.color-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.color-preset {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #ddd;
  transition: all 0.2s ease;
}

.color-preset:hover {
  transform: scale(1.1);
  border-color: #333;
}

.action-buttons,
.layer-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-buttons .el-button,
.layer-controls .el-button {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .drawing-toolbar {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  
  .tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .color-presets {
    grid-template-columns: repeat(9, 1fr);
  }
}

/* 滚动条样式 */
.drawing-toolbar::-webkit-scrollbar {
  width: 6px;
}

.drawing-toolbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.drawing-toolbar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.drawing-toolbar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
